import React from "react";
import { List, Typography, Card } from "antd";
import './list.scss'
const data = [
  { rank: 1, title: "考勤", count: 600, color: "#fff7e6" },
  { rank: 2, title: "报销单", count: 500, color: "#f0f5ff" },
  { rank: 3, title: "合同台账", count: 400, color: "#fff1f0" },
  { rank: 4, title: "项目管理", count: 300, color: "transparent" },
  { rank: 5, title: "请假管理", count: 200, color: "transparent" },
];

const PageRanking = () => {
  return (
    <Card title="页面热度排名" extra={<a href="#">更多</a>} style={{ width: 350 }}>
      <List
        dataSource={data}
        renderItem={(item) => (
          <List.Item className = 'trapezoid-left' style={{ background: item.color, borderRadius: 5, padding: 10 }}>
            <Typography.Text strong>{item.rank}.</Typography.Text>
            <span style={{ flex: 1, marginLeft: 10 }}>{item.title}</span>
            <Typography.Text>{item.count}</Typography.Text>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default PageRanking;
